<template>
  <div class="layout">
    <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
      <Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-navigate"></Icon>
            Item 1
          </template>
          <MenuItem name="1-1">Option 1</MenuItem>
          <MenuItem name="1-2">Option 2</MenuItem>
          <MenuItem name="1-3">Option 3</MenuItem>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-keypad"></Icon>
            Item 2
          </template>
          <MenuItem name="2-1">Option 1</MenuItem>
          <MenuItem name="2-2">Option 2</MenuItem>
        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-analytics"></Icon>
            Item 3
          </template>
          <MenuItem name="3-1">Option 1</MenuItem>
          <MenuItem name="3-2">Option 2</MenuItem>
        </Submenu>
      </Menu>
    </Sider>
    <Layout :style="{marginLeft: '200px',overflow: 'auto'}">
      <Header :style="{background: '#464c5b', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}" class="layout-header-bar">
        <Dropdown>
          <Button style="width: 85px;margin-left: -5px;padding:10px 0;" type="text">
            <Icon :size="25" color="#45494A" ></Icon>
          </Button>
          <Avatar href="javascript:void(0)" size="large" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
          <!--<Icon ></Icon>-->
          <DropdownMenu slot="list">
            <DropdownItem>个人中心</DropdownItem>
            <DropdownItem><span v-on:click="logout">退出</span></DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Header>
      <div style="display: flex;
                                position: relative;
                                padding-left:10px;
                                height: 40px;
                                background: #f5f7f9;
                                align-items: center;
                                box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);">
        <template >
          <Tag type="dot" style="color: #1b6d85">
           456
          </Tag>
        </template>
      </div>
      <Content :style="{padding: '0 16px 16px' }">
        <Breadcrumb :style="{margin: '16px 0'}">

        </Breadcrumb>
        <Card>
          <div style="height: 600px">
            <router-view></router-view>
          </div>
        </Card>
      </Content>
      <div class="layout-copy">
        2011-2016 &copy; TalkingData
      </div>
    </Layout>
  </div>
</template>

<script>
    export default {
        name: "Home",
        data () {
          return {
            spanLeft: 5,
            spanRight: 19
          }
        },
        computed: {
          iconSize () {
            return this.spanLeft === 5 ? 14 : 24;
          }
        },
        methods: {
          toggleClick () {
            if (this.spanLeft === 5) {
              this.spanLeft = 2;
              this.spanRight = 22;
            } else {
              this.spanLeft = 5;
              this.spanRight = 19;
            }
          }
        }
    }
</script>

<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-copy{
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }

  .layout-ceiling-main a{
    color: #9ba7b5;
  }
  .ivu-col{
    transition: width .2s ease-in-out;
  }
</style>
